<!DOCTYPE html >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Button Maker</title>
<link rel="stylesheet" type="text/css" href="ButtonMaker_files/style.css">
<link rel="stylesheet" type="text/css" href="ButtonMaker_files/colorpicker.css">
<link rel="stylesheet" type="text/css" href="ButtonMaker_files/jquery-ui.css">
<script type="text/javascript" src="ButtonMaker_files/jquery.js"></script>
<script type="text/javascript" src="ButtonMaker_files/jquery-ui.js"></script>
<script type="text/javascript" src="ButtonMaker_files/colorpicker.js"></script>
<script type="text/javascript" src="ButtonMaker_files/buttonmaker.js"></script>
<script src="ButtonMaker_files/bsa.js" async="" type="text/javascript"></script><script src="ButtonMaker_files/ga.js" async="" type="text/javascript"></script>
<style id="the-style" type="text/css">
.button {
	border-top: 1px solid #96d1f8;
	background: #65a9d7;
	background: -webkit-gradient(linear, left top, left bottom, from(#3e779d), to(#65a9d7));
	background: -webkit-linear-gradient(top, #3e779d, #65a9d7);
	background: -moz-linear-gradient(top, #3e779d, #65a9d7);
	background: -ms-linear-gradient(top, #3e779d, #65a9d7);
	background: -o-linear-gradient(top, #3e779d, #65a9d7);
	padding: 5px 10px;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
	-webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
	-moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
	box-shadow: rgba(0,0,0,1) 0 1px 0;
	text-shadow: rgba(0,0,0,.4) 0 1px 0;
	color: white;
	font-size: 14px;
	font-family: Georgia, serif;
	text-decoration: none;
	vertical-align: middle;
}
.button:hover {
	border-top-color: #28597a;
	background: #28597a;
	color: #ccc;
}
.button:active {
	border-top-color: #1b435e;
	background: #1b435e;
}
</style>
<script async="async" src="ButtonMaker_files/s_3469a2a501a9e18091036aa0c89f9dcb.js" id="_bsap_js_3469a2a501a9e18091036aa0c89f9dcb" type="text/javascript"></script>
<style id="bsa_css" type="text/css">
.one {
	position:relative
}
.one .bsa_it_ad {
	display:block;
	padding:15px;
	border:1px solid #e1e1e1;
	background:#f9f9f9;
	font-family:helvetica, arial, sans-serif;
	line-height:100%;
	position:relative
}
.one .bsa_it_ad a {
	text-decoration:none
}
.one .bsa_it_ad a:hover {
	text-decoration:none
}
.one .bsa_it_ad .bsa_it_t {
	display:block;
	font-size:12px;
	font-weight:bold;
	color:#212121;
	line-height:125%;
	padding:0 0 5px 0
}
.one .bsa_it_ad .bsa_it_d {
	display:block;
	font-size:11px;
	color:#434343;
	font-size:12px;
	line-height:135%
}
.one .bsa_it_ad .bsa_it_i {
	float:left;
	margin:0 15px 10px 0
}
.one .bsa_it_p {
	display:block;
	text-align:right;
	position:absolute;
	bottom:10px;
	right:15px
}
.one .bsa_it_p a {
	font-size:10px;
	color:#666;
	text-decoration:none
}
.one .bsa_it_ad .bsa_it_p a:hover {
	font-style:italic
}
</style>
</head>

<body>
<div id="page-wrap">
  <div id="button-box"> <a style="top: 236px; left: 199px;" href="#" class="button">View the CSS</a> </div>
  <div id="controls">
    <h1>Button Maker</h1>
    <div class="sliderBar ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" id="sizer"><a style="left: 16.6667%;" class="ui-slider-handle ui-state-default ui-corner-all" href="#"></a></div>
    <div class="sliderBar ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" id="font-sizer"><a style="left: 25%;" class="ui-slider-handle ui-state-default ui-corner-all" href="#"></a></div>
    <div class="sliderBar ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" id="border-rounder"><a style="left: 20%;" class="ui-slider-handle ui-state-default ui-corner-all" href="#"></a></div>
    <div id="colors">
      <div>
        <label for="topGradientValue">Top Gradient Color</label>
        <input maxlength="6" size="6" id="topGradientValue" class="pickable" rel="backgroundTop" value="3e779d" style="background: none repeat scroll 0% 0% rgb(62, 119, 157);" type="text">
      </div>
      <div>
        <label for="bottomGradientValue">Bottom Gradient Color</label>
        <input maxlength="6" size="6" id="bottomGradientValue" class="pickable" rel="backgroundBottom" value="65a9d7" style="background: none repeat scroll 0% 0% rgb(101, 169, 215);" type="text">
      </div>
      <div>
        <label for="borderTopColorValue">Top Border Color</label>
        <input maxlength="6" size="6" id="borderTopColorValue" class="pickable" rel="borderTopColor" value="96d1f8" style="background: none repeat scroll 0% 0% rgb(150, 209, 248);" type="text">
      </div>
      <div>
        <label for="hoverBackgroundColorValue">Hover Background Color</label>
        <input maxlength="6" size="6" id="hoverBackgroundColorValue" class="pickable" rel="hoverBackground" value="28597a" style="background: none repeat scroll 0% 0% rgb(40, 89, 122);" type="text">
      </div>
      <div>
        <label for="textColor">Text Color</label>
        <input maxlength="6" size="6" id="textColor" class="pickable" rel="textColor" value="white" style="background: none repeat scroll 0% 0% white;" type="text">
      </div>
      <div>
        <label for="hoverTextColorValue">Hover Text Color</label>
        <input maxlength="6" size="6" id="hoverTextColorValue" class="pickable" rel="hoverColor" value="cccccc" style="background: none repeat scroll 0% 0% rgb(204, 204, 204);" type="text">
      </div>
      <div>
        <label for="activeBackgroundColor">Active Background Color</label>
        <input maxlength="6" size="6" id="activeBackgroundColor" class="pickable" rel="activeBackground" value="1b435e" style="background: none repeat scroll 0% 0% rgb(27, 67, 94);" type="text">
      </div>
    </div>
    <select id="fontSelector">
      <option value="Helvetica, Arial, Sans-Serif">Helvetica</option>
      <option selected="selected" value="Georgia, Serif">Georgia</option>
      <option value="'Lucida Grande', Helvetica, Arial, Sans-Serif">Lucida Grande</option>
    </select>
  </div>
</div>
<div id="the-css">.button {<br>
  &nbsp;&nbsp;      border-top: 1px solid #96d1f8;<br>
  &nbsp;&nbsp;     background: #65a9d7;<br>
  &nbsp;&nbsp;     background: -webkit-gradient(linear, left top, left bottom, from(#3e779d), to(#65a9d7));<br>
  &nbsp;&nbsp;     background: -webkit-linear-gradient(top, #3e779d, #65a9d7);<br>
  &nbsp;&nbsp;     background: -moz-linear-gradient(top, #3e779d, #65a9d7);<br>
  &nbsp;&nbsp;     background: -ms-linear-gradient(top, #3e779d, #65a9d7);<br>
  &nbsp;&nbsp;     background: -o-linear-gradient(top, #3e779d, #65a9d7);<br>
  &nbsp;&nbsp;     padding: 5px 10px;<br>
  &nbsp;&nbsp;     -webkit-border-radius: 8px;<br>
  &nbsp;&nbsp;     -moz-border-radius: 8px;<br>
  &nbsp;&nbsp;     border-radius: 8px;<br>
  &nbsp;&nbsp;     -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;<br>
  &nbsp;&nbsp;     -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;<br>
  &nbsp;&nbsp;     box-shadow: rgba(0,0,0,1) 0 1px 0;<br>
  &nbsp;&nbsp;     text-shadow: rgba(0,0,0,.4) 0 1px 0;<br>
  &nbsp;&nbsp;     color: white;<br>
  &nbsp;&nbsp;     font-size: 14px;<br>
  &nbsp;&nbsp;     font-family: Georgia, serif;<br>
  &nbsp;&nbsp;     text-decoration: none;<br>
  &nbsp;&nbsp;     vertical-align: middle;<br>
  &nbsp;&nbsp;&nbsp;}<br>
  .button:hover {<br>
  &nbsp;&nbsp;      border-top-color: #28597a;<br>
  &nbsp;&nbsp;     background: #28597a;<br>
  &nbsp;&nbsp;     color: #ccc;<br>
  &nbsp;&nbsp;&nbsp;}<br>
  .button:active {<br>
  &nbsp;&nbsp;      border-top-color: #1b435e;<br>
  &nbsp;&nbsp;     background: #1b435e;<br>
  &nbsp;&nbsp;&nbsp;}<br>
</div>
<br class="ignore-code">
<style type="text/css" style="display: none;">
	
	#source-code { 
		z-index: 7000;
		display: none;
		text-align: left;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(255,255,255,0.8);
	}
	#source-code:target { 
		display:block;
	}
	#source-code pre {
		padding: 20px;
		font: 14px/1.6 Monaco,Courier,MonoSpace;
		margin: 50px auto;
		background: rgba(0,0,0,0.8);
		color: white;
		width: 80%;
		height: 80%;
		overflow: auto
	}
	#source-code pre a, #source-code pre a span {
		text-decoration :none;
		color: #0cf !important
	}
	#x { 
		position: absolute;
		top: 30px;
		left: 10%;
		margin-left: -41px;
	}
	#x img {
		border:0;
	}
		
	.str{color:#61ff74}
	.kwd{color:white}
	.com{color:white}
	.typ{color:#f1915d}
	.lit{color:white}
	.pun{color:white}
	.pln{color:#ffef97}
	.tag{color:#ffab58}
	.atn{color:#fabb4e}
	.atv{color:#ffd996}
	.dec{color:red}
	
	.bsa_it_ad { 
		padding: 8px 4px 8px 12px !important;
		overflow: hidden !important;
		background: #bbb8b6 !important;
		border: 4px solid #d6d6d6 !important;
		border-top: 0 !important;
		-webkit-box-shadow: 5px 5px 12px rgba(0,0,0,0.4);
		-moz-box-shadow:    5px 5px 12px rgba(0,0,0,0.4);
		box-shadow:         5px 5px 12px rgba(0,0,0,0.4); 
	}
	.bsa_it_ad a { 
	  margin: 0 !important;
		padding: 0 !important;
	}
	.bsa_it_ad a img { 
	  border: 0 !important;
		position: static !important;
	}
	.bsa_it_ad a:hover img {
		margin: 0 !important;
	}
	.bsa_it_ad a:hover { 
	  background: none !important;
	}
	.bsa_it_i {
		margin: 0 15px 0 0 !important;
	}
	.bsa_it_t { 
		margin: 12px 0 0 0 !important;
		font: 16px Georgia,Serif !important;
	}
	.bsa_it_d {
		font: 11px Verdana,Helvetica,Arial,Sans-Serif;
		padding-right: 10px;
	}
	.bsa_it_p{
		display: none !important;
	}
	#bsap_aplink {
		position: absolute; 
		color: #999;
		text-decoration: none; 
		bottom: 8px !important;
		right: 8px !important;
		padding: 0 !important;
	}
	.bsa_it_p a:hover {
		background:none !important;
	}
	#demo-top-bar {
		height: 83px; 
		background: lightgray url(/wp-content/themes/CSS-Tricks-9/images/bglines.png) !important;
		color: white !important; 
		font: 14px Georgia, Serif !important; 
		position: relative; 
		zoom: 1; 
		width: 100% !important; 
		z-index: 6000;
		-webkit-box-shadow: 0 0 10px black;
		-moz-box-shadow:    0 0 10px black;
		box-shadow:         0 0 10px black; 
	}
	#demo-bar-inside {
		width: 960px; height: 77px; margin: 0 auto; position: relative;
	}
	#demo-bar-buttons {
		position: absolute; 
		left: 300px; 
		top: 7px; 
		width: 200px;
		text-align: center;
		line-height: 2.4; 
	}
	#demo-bar-ad {
		width: 416px; 
		position: absolute; 
		right: 0; top: 0;
	}
	#demo-bar-badge {
		width: 270px !important;
		height: 112px !important;
		margin: 0 !important;
		padding: 0 !important;
		background: url(/images/Example-Badge.png) no-repeat;
		text-indent: -9999px;
		position: absolute;
		top: 0;
		left: 0;
	}
	#demo-bar-badge:before, #demo-bar-badge:after {
		display: none !important;
	}
	
	.header-button {
	  display: inline-block;
	  padding: 3px 15px;
	  -webkit-border-radius: 18px;
		-moz-border-radius:    18px;
		border-radius:         18px;
		font: 12px "Lucida Grande", Sans-Serif;
	  background-color: #b6d3f4;
	  background-image: -webkit-gradient(linear, left top, left bottom, from(#b6d3f4), to(#5483b8)) !important; 
	  background-image: -webkit-linear-gradient(top, #b6d3f4, #5483b8) !important; 
	  background-image:    -moz-linear-gradient(top, #b6d3f4, #5483b8) !important; 
	  background-image:     -ms-linear-gradient(top, #b6d3f4, #5483b8) !important; 
	  background-image:      -o-linear-gradient(top, #b6d3f4, #5483b8) !important; 
	  color: white !important;
	  box-shadow: inset 0 1px 1px white,
	                    0 3px 3px rgba(0,0,0,0.6);
	  border: 1px solid #9ac9ff !important;
	  font-weight: 600;
	  text-shadow: 0 -1px 0 rgba(0,0,0,0.3);
	  text-decoration: none;
	  margin: 0;
	  position: relative;
	}
	
	.header-button:hover {
	  box-shadow: inset 0 2px 6px white,
	                    0 3px 3px rgba(0,0,0,0.6);
	}
	
	.header-button:active {
	  box-shadow: inset 0 2px 6px white,
	                    0 1px 1px rgba(0,0,0,0.6);
	  
	  top: 2px;
	}
	
	.view-source-button {
		position: fixed !important;
		top: auto !important;
		bottom: 10px;
		right: 10px;
		z-index: 100;
	}
	
</style>
<div id="source-code"> <a href="#" id="x"><img src="ButtonMaker_files/x.png" alt="close"></a>
  <pre class="prettyprint"><span class="dec">&lt;!DOCTYPE html&gt;</span><span class="pln"><br></span><span class="tag">&lt;html&gt;</span><span class="pln"><br></span><span class="tag">&lt;head&gt;</span><span class="pln"><br>&nbsp; &nbsp; &nbsp; &nbsp; </span><span class="tag">&lt;meta</span><span class="pln"> </span><span class="atn">http-equiv</span><span class="pun">=</span><span class="atv">"Content-Type"</span><span class="pln"> </span><span class="atn">content</span><span class="pun">=</span><span class="atv">"text/html; charset=UTF-8"</span><span class="tag">&gt;</span><span class="pln"><br>&nbsp; &nbsp; &nbsp; &nbsp; <br>&nbsp; &nbsp; &nbsp; &nbsp; </span><span class="tag">&lt;title&gt;</span><span class="pln">Button Maker</span><span class="tag">&lt;/title&gt;</span><span class="pln"><br>&nbsp; &nbsp; &nbsp; &nbsp; <br>&nbsp; &nbsp; &nbsp; &nbsp; </span><span class="tag">&lt;link</span><span class="pln"> </span><span class="atn">rel</span><span class="pun">=</span><span class="atv">"stylesheet"</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"text/css"</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"css/style.css"</span><span class="tag">&gt;</span><span class="pln"><br>&nbsp; &nbsp; &nbsp; &nbsp; </span><span class="tag">&lt;link</span><span class="pln"> </span><span class="atn">rel</span><span class="pun">=</span><span class="atv">"stylesheet"</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"text/css"</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"css/colorpicker.css"</span><span class="tag">&gt;</span><span class="pln"><br>&nbsp; &nbsp; &nbsp; &nbsp; &lt;link rel="stylesheet" type="text/css" href="</span><a href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/themes/base/jquery-ui.css" &gt;"="">http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/themes/base/jquery-ui.css"&gt;</a><span class="pln"><br><br>&nbsp; &nbsp; &lt;script type="text/javascript" src="</span><a href="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" &gt;&lt;="" script&gt;"="">http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"&gt;&lt;/script&gt;</a><span class="pln"> &nbsp; &nbsp;<br>&nbsp; &nbsp; &lt;script type="text/javascript" src="</span><a href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js" &gt;&lt;="" script&gt;"="">http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"&gt;&lt;/script&gt;</a><span class="pln"><br>&nbsp; &nbsp; </span><span class="tag">&lt;script</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"text/javascript"</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"js/colorpicker.js"</span><span class="tag">&gt;&lt;/script&gt;</span><span class="pln"><br>&nbsp; &nbsp; </span><span class="tag">&lt;script</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"text/javascript"</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"js/buttonmaker.js"</span><span class="tag">&gt;&lt;/script&gt;</span><span class="pln"><br></span><span class="tag">&lt;/head&gt;</span><span class="pln"><br><br></span><span class="tag">&lt;body&gt;</span><span class="pln"><br>&nbsp; &nbsp; &nbsp; &nbsp; <br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"demo-top-bar"</span><span class="tag">&gt;&lt;div</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"demo-bar-inside"</span><span class="tag">&gt;&lt;h2</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"demo-bar-badge"</span><span class="tag">&gt;</span><span class="pln">CSS-Tricks Example</span><span class="tag">&lt;/h2&gt;&lt;div</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"demo-bar-buttons"</span><span class="tag">&gt;&lt;a</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"header-button"</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"/css3-button-maker/"</span><span class="tag">&gt;</span><span class="pln">← Back to Article</span><span class="tag">&lt;/a&gt;</span><span class="pln"> &nbsp; </span><span class="tag">&lt;a</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"header-button"</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"/examples/"</span><span class="tag">&gt;</span><span class="pln">More Demos →</span><span class="tag">&lt;/a&gt;&lt;/div&gt;&lt;div</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"demo-bar-ad"</span><span class="tag">&gt;&lt;div</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"bsap_1255488"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"bsarocks bsap_3469a2a501a9e18091036aa0c89f9dcb"</span><span class="tag">&gt;&lt;/div&gt;&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"</span><a href="http://adpacks.com/" "="">http://adpacks.com"</a><span class="atv"> id="</span><span class="atn">bsap_aplink</span><span class="atv">"&gt;</span><span class="pln">via Ad Packs</span><span class="tag">&lt;/a&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;</span><span class="pln"> <br><br>&nbsp; &nbsp; </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"page-wrap"</span><span class="tag">&gt;</span><span class="pln"><br>&nbsp; <br>&nbsp; &nbsp; &nbsp; &nbsp; </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"button-box"</span><span class="tag">&gt;</span><span class="pln"><br>&nbsp; &nbsp; <br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span class="tag">&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"#"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"button"</span><span class="tag">&gt;</span><span class="pln">View the CSS</span><span class="tag">&lt;/a&gt;</span><span class="pln"><br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <br>&nbsp; &nbsp; &nbsp; &nbsp; </span><span class="tag">&lt;/div&gt;</span><span class="pln"><br>&nbsp; &nbsp; &nbsp; &nbsp; <br>&nbsp; &nbsp; &nbsp; &nbsp; </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"controls"</span><span class="tag">&gt;</span><span class="pln"><br>&nbsp; &nbsp; &nbsp; &nbsp; <br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span class="tag">&lt;h1&gt;</span><span class="pln">Button Maker</span><span class="tag">&lt;/h1&gt;</span><span class="pln"><br><br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"sliderBar"</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"sizer"</span><span class="tag">&gt;&lt;/div&gt;</span><span class="pln"><br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"sliderBar"</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"font-sizer"</span><span class="tag">&gt;&lt;/div&gt;</span><span class="pln"><br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"sliderBar"</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"border-rounder"</span><span class="tag">&gt;&lt;/div&gt;</span><span class="pln"><br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"colors"</span><span class="tag">&gt;</span><span class="pln"><br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span class="tag">&lt;div&gt;</span><span class="pln"><br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span class="tag">&lt;label</span><span class="pln"> </span><span class="atn">for</span><span class="pun">=</span><span class="atv">"topGradientValue"</span><span class="tag">&gt;</span><span class="pln">Top Gradient Color</span><span class="tag">&lt;/label&gt;</span><span class="pln"><br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">maxlength</span><span class="pun">=</span><span class="atv">"6"</span><span class="pln"> </span><span class="atn">size</span><span class="pun">=</span><span class="atv">"6"</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"topGradientValue"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"pickable"</span><span class="pln"> </span><span class="atn">rel</span><span class="pun">=</span><span class="atv">"backgroundTop"</span><span class="pln"> </span><span class="atn">value</span><span class="pun">=</span><span class="atv">"3e779d"</span><span class="pln"> </span><span class="atn">style</span><span class="pun">=</span><span class="atv">"</span><span class="pln">background</span><span class="pun">:</span><span class="pln"> </span><span class="com">#3e779d;</span><span class="atv">"</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"text"</span><span class="tag">&gt;</span><span class="pln"><br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span class="tag">&lt;/div&gt;</span><span class="pln"><br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span class="tag">&lt;div&gt;</span><span class="pln"><br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span class="tag">&lt;label</span><span class="pln"> </span><span class="atn">for</span><span class="pun">=</span><span class="atv">"bottomGradientValue"</span><span class="tag">&gt;</span><span class="pln">Bottom Gradient Color</span><span class="tag">&lt;/label&gt;</span><span class="pln"><br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">maxlength</span><span class="pun">=</span><span class="atv">"6"</span><span class="pln"> </span><span class="atn">size</span><span class="pun">=</span><span class="atv">"6"</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"bottomGradientValue"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"pickable"</span><span class="pln"> </span><span class="atn">rel</span><span class="pun">=</span><span class="atv">"backgroundBottom"</span><span class="pln"> </span><span class="atn">value</span><span class="pun">=</span><span class="atv">"65a9d7"</span><span class="pln"> </span><span class="atn">style</span><span class="pun">=</span><span class="atv">"</span><span class="pln">background</span><span class="pun">:</span><span class="pln"> </span><span class="com">#65a9d7;</span><span class="atv">"</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"text"</span><span class="tag">&gt;</span><span class="pln"><br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span class="tag">&lt;/div&gt;</span><span class="pln"><br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span class="tag">&lt;div&gt;</span><span class="pln"><br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span class="tag">&lt;label</span><span class="pln"> </span><span class="atn">for</span><span class="pun">=</span><span class="atv">"borderTopColorValue"</span><span class="tag">&gt;</span><span class="pln">Top Border Color</span><span class="tag">&lt;/label&gt;</span><span class="pln"><br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">maxlength</span><span class="pun">=</span><span class="atv">"6"</span><span class="pln"> </span><span class="atn">size</span><span class="pun">=</span><span class="atv">"6"</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"borderTopColorValue"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"pickable"</span><span class="pln"> </span><span class="atn">rel</span><span class="pun">=</span><span class="atv">"borderTopColor"</span><span class="pln"> </span><span class="atn">value</span><span class="pun">=</span><span class="atv">"96d1f8"</span><span class="pln"> </span><span class="atn">style</span><span class="pun">=</span><span class="atv">"</span><span class="pln">background</span><span class="pun">:</span><span class="pln"> </span><span class="com">#96d1f8;</span><span class="atv">"</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"text"</span><span class="tag">&gt;</span><span class="pln"><br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span class="tag">&lt;/div&gt;</span><span class="pln"><br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span class="tag">&lt;div&gt;</span><span class="pln"><br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span class="tag">&lt;label</span><span class="pln"> </span><span class="atn">for</span><span class="pun">=</span><span class="atv">"hoverBackgroundColorValue"</span><span class="tag">&gt;</span><span class="pln">Hover Background Color</span><span class="tag">&lt;/label&gt;</span><span class="pln"><br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">maxlength</span><span class="pun">=</span><span class="atv">"6"</span><span class="pln"> </span><span class="atn">size</span><span class="pun">=</span><span class="atv">"6"</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"hoverBackgroundColorValue"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"pickable"</span><span class="pln"> </span><span class="atn">rel</span><span class="pun">=</span><span class="atv">"hoverBackground"</span><span class="pln"> </span><span class="atn">value</span><span class="pun">=</span><span class="atv">"28597a"</span><span class="pln"> </span><span class="atn">style</span><span class="pun">=</span><span class="atv">"</span><span class="pln">background</span><span class="pun">:</span><span class="pln"> </span><span class="com">#28597a;</span><span class="atv">"</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"text"</span><span class="tag">&gt;</span><span class="pln"><br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span class="tag">&lt;/div&gt;</span><span class="pln"><br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span class="tag">&lt;div&gt;</span><span class="pln"><br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span class="tag">&lt;label</span><span class="pln"> </span><span class="atn">for</span><span class="pun">=</span><span class="atv">"textColor"</span><span class="tag">&gt;</span><span class="pln">Text Color</span><span class="tag">&lt;/label&gt;</span><span class="pln"><br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">maxlength</span><span class="pun">=</span><span class="atv">"6"</span><span class="pln"> </span><span class="atn">size</span><span class="pun">=</span><span class="atv">"6"</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"textColor"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"pickable"</span><span class="pln"> </span><span class="atn">rel</span><span class="pun">=</span><span class="atv">"textColor"</span><span class="pln"> </span><span class="atn">value</span><span class="pun">=</span><span class="atv">"white"</span><span class="pln"> </span><span class="atn">style</span><span class="pun">=</span><span class="atv">"</span><span class="pln">background</span><span class="pun">:</span><span class="pln"> white</span><span class="pun">;</span><span class="atv">"</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"text"</span><span class="tag">&gt;</span><span class="pln"><br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span class="tag">&lt;/div&gt;</span><span class="pln"><br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span class="tag">&lt;div&gt;</span><span class="pln"><br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span class="tag">&lt;label</span><span class="pln"> </span><span class="atn">for</span><span class="pun">=</span><span class="atv">"hoverTextColorValue"</span><span class="tag">&gt;</span><span class="pln">Hover Text Color</span><span class="tag">&lt;/label&gt;</span><span class="pln"><br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">maxlength</span><span class="pun">=</span><span class="atv">"6"</span><span class="pln"> </span><span class="atn">size</span><span class="pun">=</span><span class="atv">"6"</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"hoverTextColorValue"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"pickable"</span><span class="pln"> </span><span class="atn">rel</span><span class="pun">=</span><span class="atv">"hoverColor"</span><span class="pln"> </span><span class="atn">value</span><span class="pun">=</span><span class="atv">"cccccc"</span><span class="pln"> </span><span class="atn">style</span><span class="pun">=</span><span class="atv">"</span><span class="pln">background</span><span class="pun">:</span><span class="pln"> </span><span class="com">#cccccc;</span><span class="atv">"</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"text"</span><span class="tag">&gt;</span><span class="pln"><br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span class="tag">&lt;/div&gt;</span><span class="pln"><br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span class="tag">&lt;div&gt;</span><span class="pln"><br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span class="tag">&lt;label</span><span class="pln"> </span><span class="atn">for</span><span class="pun">=</span><span class="atv">"activeBackgroundColor"</span><span class="tag">&gt;</span><span class="pln">Active Background Color</span><span class="tag">&lt;/label&gt;</span><span class="pln"><br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">maxlength</span><span class="pun">=</span><span class="atv">"6"</span><span class="pln"> </span><span class="atn">size</span><span class="pun">=</span><span class="atv">"6"</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"activeBackgroundColor"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"pickable"</span><span class="pln"> </span><span class="atn">rel</span><span class="pun">=</span><span class="atv">"activeBackground"</span><span class="pln"> </span><span class="atn">value</span><span class="pun">=</span><span class="atv">"1b435e"</span><span class="pln"> </span><span class="atn">style</span><span class="pun">=</span><span class="atv">"</span><span class="pln">background</span><span class="pun">:</span><span class="pln"> </span><span class="com">#1b435e;</span><span class="atv">"</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"text"</span><span class="tag">&gt;</span><span class="pln"><br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span class="tag">&lt;/div&gt;</span><span class="pln"><br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span class="tag">&lt;/div&gt;</span><span class="pln"><br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span class="tag">&lt;select</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"fontSelector"</span><span class="tag">&gt;</span><span class="pln"><br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span class="tag">&lt;option</span><span class="pln"> </span><span class="atn">value</span><span class="pun">=</span><span class="atv">"Helvetica, Arial, Sans-Serif"</span><span class="tag">&gt;</span><span class="pln">Helvetica</span><span class="tag">&lt;/option&gt;</span><span class="pln"><br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span class="tag">&lt;option</span><span class="pln"> </span><span class="atn">selected</span><span class="pun">=</span><span class="atv">"seleted"</span><span class="pln"> </span><span class="atn">value</span><span class="pun">=</span><span class="atv">"Georgia, Serif"</span><span class="tag">&gt;</span><span class="pln">Georgia</span><span class="tag">&lt;/option&gt;</span><span class="pln"><br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span class="tag">&lt;option</span><span class="pln"> </span><span class="atn">value</span><span class="pun">=</span><span class="atv">"'Lucida Grande', Helvetica, Arial, Sans-Serif"</span><span class="tag">&gt;</span><span class="pln">Lucida Grande</span><span class="tag">&lt;/option&gt;</span><span class="pln"><br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span class="tag">&lt;/select&gt;</span><span class="pln"><br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <br>&nbsp; &nbsp; &nbsp; &nbsp; </span><span class="tag">&lt;/div&gt;</span><span class="pln"><br>&nbsp; &nbsp; &nbsp; &nbsp; <br>&nbsp; &nbsp; &nbsp; &nbsp; </span><span class="tag">&lt;/div&gt;</span><span class="pln"><br>&nbsp; &nbsp; &nbsp; &nbsp; <br>&nbsp; &nbsp; </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"the-css"</span><span class="tag">&gt;&lt;/div&gt;</span><span class="pln"><br>&nbsp; &nbsp; &nbsp; &nbsp; <br>&nbsp; &nbsp; &nbsp; &nbsp; <br></span><span class="tag">&lt;/body&gt;</span><span class="pln"><br><br></span><span class="tag">&lt;/html&gt;</span></pre>
</div>
<a class="view-source-button header-button" href="#source-code" id="view-source">Fancy View Source</a> 
<script type="text/javascript" src="ButtonMaker_files/prettify.js"></script> 
<script>
	if(typeof jQuery=='undefined') { 
		function getScript(url,success) { 
			var script=document.createElement('script');
			script.src=url;
			var head=document.getElementsByTagName('head')[0],done=false;script.onload=script.onreadystatechange=function() {
				if(!done&&(!this.readyState||this.readyState=='loaded'||this.readyState=='complete')){done=true;success();
				script.onload=script.onreadystatechange=null;head.removeChild(script)}};head.appendChild(script)};getScript('http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js',function() {
   if(typeof jQuery=='undefined'){}else{fancyCode()}})}else{fancyCode()}
   function fancyCode(){ var code = '&lt;!DOCTYPE html>\n&lt;html>\n' + $("html").html().replace(/[<>]/g, function(m){return{'<':'&lt;','>':'&gt;'}[m]}).replace(/((ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?)/gi,'<a href="$1">$1</a>');
     code = code.substring(0, code.indexOf('br class="ignore-code"') - 4) + '\n&lt;/body>\n\n&lt;/html>'; $("<pre />",{"html" : code,"class":"prettyprint"}).appendTo("#source-code"); prettyPrint()}
</script> 
<script type="text/javascript">
	(function(){ var bsa = document.createElement('script'); bsa.type = 'text/javascript'; bsa.async = true; bsa.src = '//s3.buysellads.com/ac/bsa.js'; (document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(bsa); })();
</script> 
<script type="text/javascript">
	var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-68528-29']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(ga); })();
</script>
<div id="collorpicker_492" class="colorpicker">
  <div style="background-color: rgb(255, 0, 0);" class="colorpicker_color">
    <div>
      <div style="left: 150px; top: 0px;"></div>
    </div>
  </div>
  <div class="colorpicker_hue">
    <div style="top: 150px;"></div>
  </div>
  <div style="background-color: rgb(255, 0, 0);" class="colorpicker_new_color"></div>
  <div style="background-color: rgb(255, 0, 0);" class="colorpicker_current_color"></div>
  <div class="colorpicker_hex">
    <input value="ff0000" maxlength="6" size="6" type="text">
  </div>
  <div class="colorpicker_rgb_r colorpicker_field">
    <input value="255" maxlength="3" size="3" type="text">
    <span></span></div>
  <div class="colorpicker_rgb_g colorpicker_field">
    <input value="0" maxlength="3" size="3" type="text">
    <span></span></div>
  <div class="colorpicker_rgb_b colorpicker_field">
    <input value="0" maxlength="3" size="3" type="text">
    <span></span></div>
  <div class="colorpicker_hsb_h colorpicker_field">
    <input value="0" maxlength="3" size="3" type="text">
    <span></span></div>
  <div class="colorpicker_hsb_s colorpicker_field">
    <input value="100" maxlength="3" size="3" type="text">
    <span></span></div>
  <div class="colorpicker_hsb_b colorpicker_field">
    <input value="100" maxlength="3" size="3" type="text">
    <span></span></div>
  <div class="colorpicker_submit">Select</div>
</div>
<div id="collorpicker_395" class="colorpicker">
  <div style="background-color: rgb(255, 0, 0);" class="colorpicker_color">
    <div>
      <div style="left: 150px; top: 0px;"></div>
    </div>
  </div>
  <div class="colorpicker_hue">
    <div style="top: 150px;"></div>
  </div>
  <div style="background-color: rgb(255, 0, 0);" class="colorpicker_new_color"></div>
  <div style="background-color: rgb(255, 0, 0);" class="colorpicker_current_color"></div>
  <div class="colorpicker_hex">
    <input value="ff0000" maxlength="6" size="6" type="text">
  </div>
  <div class="colorpicker_rgb_r colorpicker_field">
    <input value="255" maxlength="3" size="3" type="text">
    <span></span></div>
  <div class="colorpicker_rgb_g colorpicker_field">
    <input value="0" maxlength="3" size="3" type="text">
    <span></span></div>
  <div class="colorpicker_rgb_b colorpicker_field">
    <input value="0" maxlength="3" size="3" type="text">
    <span></span></div>
  <div class="colorpicker_hsb_h colorpicker_field">
    <input value="0" maxlength="3" size="3" type="text">
    <span></span></div>
  <div class="colorpicker_hsb_s colorpicker_field">
    <input value="100" maxlength="3" size="3" type="text">
    <span></span></div>
  <div class="colorpicker_hsb_b colorpicker_field">
    <input value="100" maxlength="3" size="3" type="text">
    <span></span></div>
  <div class="colorpicker_submit">Select</div>
</div>
<div id="collorpicker_711" class="colorpicker">
  <div style="background-color: rgb(255, 0, 0);" class="colorpicker_color">
    <div>
      <div style="left: 150px; top: 0px;"></div>
    </div>
  </div>
  <div class="colorpicker_hue">
    <div style="top: 150px;"></div>
  </div>
  <div style="background-color: rgb(255, 0, 0);" class="colorpicker_new_color"></div>
  <div style="background-color: rgb(255, 0, 0);" class="colorpicker_current_color"></div>
  <div class="colorpicker_hex">
    <input value="ff0000" maxlength="6" size="6" type="text">
  </div>
  <div class="colorpicker_rgb_r colorpicker_field">
    <input value="255" maxlength="3" size="3" type="text">
    <span></span></div>
  <div class="colorpicker_rgb_g colorpicker_field">
    <input value="0" maxlength="3" size="3" type="text">
    <span></span></div>
  <div class="colorpicker_rgb_b colorpicker_field">
    <input value="0" maxlength="3" size="3" type="text">
    <span></span></div>
  <div class="colorpicker_hsb_h colorpicker_field">
    <input value="0" maxlength="3" size="3" type="text">
    <span></span></div>
  <div class="colorpicker_hsb_s colorpicker_field">
    <input value="100" maxlength="3" size="3" type="text">
    <span></span></div>
  <div class="colorpicker_hsb_b colorpicker_field">
    <input value="100" maxlength="3" size="3" type="text">
    <span></span></div>
  <div class="colorpicker_submit">Select</div>
</div>
<div id="collorpicker_223" class="colorpicker">
  <div style="background-color: rgb(255, 0, 0);" class="colorpicker_color">
    <div>
      <div style="left: 150px; top: 0px;"></div>
    </div>
  </div>
  <div class="colorpicker_hue">
    <div style="top: 150px;"></div>
  </div>
  <div style="background-color: rgb(255, 0, 0);" class="colorpicker_new_color"></div>
  <div style="background-color: rgb(255, 0, 0);" class="colorpicker_current_color"></div>
  <div class="colorpicker_hex">
    <input value="ff0000" maxlength="6" size="6" type="text">
  </div>
  <div class="colorpicker_rgb_r colorpicker_field">
    <input value="255" maxlength="3" size="3" type="text">
    <span></span></div>
  <div class="colorpicker_rgb_g colorpicker_field">
    <input value="0" maxlength="3" size="3" type="text">
    <span></span></div>
  <div class="colorpicker_rgb_b colorpicker_field">
    <input value="0" maxlength="3" size="3" type="text">
    <span></span></div>
  <div class="colorpicker_hsb_h colorpicker_field">
    <input value="0" maxlength="3" size="3" type="text">
    <span></span></div>
  <div class="colorpicker_hsb_s colorpicker_field">
    <input value="100" maxlength="3" size="3" type="text">
    <span></span></div>
  <div class="colorpicker_hsb_b colorpicker_field">
    <input value="100" maxlength="3" size="3" type="text">
    <span></span></div>
  <div class="colorpicker_submit">Select</div>
</div>
<div id="collorpicker_100" class="colorpicker">
  <div style="background-color: rgb(255, 0, 0);" class="colorpicker_color">
    <div>
      <div style="left: 150px; top: 0px;"></div>
    </div>
  </div>
  <div class="colorpicker_hue">
    <div style="top: 150px;"></div>
  </div>
  <div style="background-color: rgb(255, 0, 0);" class="colorpicker_new_color"></div>
  <div style="background-color: rgb(255, 0, 0);" class="colorpicker_current_color"></div>
  <div class="colorpicker_hex">
    <input value="ff0000" maxlength="6" size="6" type="text">
  </div>
  <div class="colorpicker_rgb_r colorpicker_field">
    <input value="255" maxlength="3" size="3" type="text">
    <span></span></div>
  <div class="colorpicker_rgb_g colorpicker_field">
    <input value="0" maxlength="3" size="3" type="text">
    <span></span></div>
  <div class="colorpicker_rgb_b colorpicker_field">
    <input value="0" maxlength="3" size="3" type="text">
    <span></span></div>
  <div class="colorpicker_hsb_h colorpicker_field">
    <input value="0" maxlength="3" size="3" type="text">
    <span></span></div>
  <div class="colorpicker_hsb_s colorpicker_field">
    <input value="100" maxlength="3" size="3" type="text">
    <span></span></div>
  <div class="colorpicker_hsb_b colorpicker_field">
    <input value="100" maxlength="3" size="3" type="text">
    <span></span></div>
  <div class="colorpicker_submit">Select</div>
</div>
<div id="collorpicker_507" class="colorpicker">
  <div style="background-color: rgb(255, 0, 0);" class="colorpicker_color">
    <div>
      <div style="left: 150px; top: 0px;"></div>
    </div>
  </div>
  <div class="colorpicker_hue">
    <div style="top: 150px;"></div>
  </div>
  <div style="background-color: rgb(255, 0, 0);" class="colorpicker_new_color"></div>
  <div style="background-color: rgb(255, 0, 0);" class="colorpicker_current_color"></div>
  <div class="colorpicker_hex">
    <input value="ff0000" maxlength="6" size="6" type="text">
  </div>
  <div class="colorpicker_rgb_r colorpicker_field">
    <input value="255" maxlength="3" size="3" type="text">
    <span></span></div>
  <div class="colorpicker_rgb_g colorpicker_field">
    <input value="0" maxlength="3" size="3" type="text">
    <span></span></div>
  <div class="colorpicker_rgb_b colorpicker_field">
    <input value="0" maxlength="3" size="3" type="text">
    <span></span></div>
  <div class="colorpicker_hsb_h colorpicker_field">
    <input value="0" maxlength="3" size="3" type="text">
    <span></span></div>
  <div class="colorpicker_hsb_s colorpicker_field">
    <input value="100" maxlength="3" size="3" type="text">
    <span></span></div>
  <div class="colorpicker_hsb_b colorpicker_field">
    <input value="100" maxlength="3" size="3" type="text">
    <span></span></div>
  <div class="colorpicker_submit">Select</div>
</div>
<div id="collorpicker_609" class="colorpicker">
  <div style="background-color: rgb(255, 0, 0);" class="colorpicker_color">
    <div>
      <div style="left: 150px; top: 0px;"></div>
    </div>
  </div>
  <div class="colorpicker_hue">
    <div style="top: 150px;"></div>
  </div>
  <div style="background-color: rgb(255, 0, 0);" class="colorpicker_new_color"></div>
  <div style="background-color: rgb(255, 0, 0);" class="colorpicker_current_color"></div>
  <div class="colorpicker_hex">
    <input value="ff0000" maxlength="6" size="6" type="text">
  </div>
  <div class="colorpicker_rgb_r colorpicker_field">
    <input value="255" maxlength="3" size="3" type="text">
    <span></span></div>
  <div class="colorpicker_rgb_g colorpicker_field">
    <input value="0" maxlength="3" size="3" type="text">
    <span></span></div>
  <div class="colorpicker_rgb_b colorpicker_field">
    <input value="0" maxlength="3" size="3" type="text">
    <span></span></div>
  <div class="colorpicker_hsb_h colorpicker_field">
    <input value="0" maxlength="3" size="3" type="text">
    <span></span></div>
  <div class="colorpicker_hsb_s colorpicker_field">
    <input value="100" maxlength="3" size="3" type="text">
    <span></span></div>
  <div class="colorpicker_hsb_b colorpicker_field">
    <input value="100" maxlength="3" size="3" type="text">
    <span></span></div>
  <div class="colorpicker_submit">Select</div>
</div>
</body>
</html>